//LoaderPage1.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.0

Rectangle {
    id:root
    width: 600
    height: 40
    color: "transparent"

    property int modelSource: -1 // 0: qml,1:c++
    property int counter: 2

    // signal send type
    signal sendType(string type);

    enum SourceStyle {
        SourceQML,
        SourceC
    }

    Button {
        id: button
        x: 5
        y: 0
        height: root.height -10
        text: "Switch to"
        anchors.verticalCenter: parent.verticalCenter
        onClicked:  {modelSource = (modelSource+1)%2}
    }

    ListView {
        id: viewTab
        y: 0
        anchors.left: button.right
        anchors.leftMargin: 4
        anchors.right: buttonAdd.left
        anchors.rightMargin: 5
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.topMargin: 5
        anchors.bottomMargin: 5
        spacing: 5
        orientation: ListView.Horizontal
        clip: true
        ScrollBar.horizontal: ScrollBar {
            id: scrollBar1
        }

        highlight: Rectangle{
            color:"lightsteelblue"
            radius:5
        }

        // model:modelButton // do not initial model
        focus: true
        delegate: buttonDelegate
    }

    Button {
        id: buttonAdd
        x: 12
        y: -6
        width: 24
        height: root.height -10
        text: "+"
        anchors.right: parent.right
        anchors.rightMargin: 5
        anchors.verticalCenter: parent.verticalCenter
        onClicked: modelAppend()
    }

    // button Delegate
    Component {
        id: buttonDelegate
        ToolButton {
            text:dmTitle

            width: text.length * 8 +16;
            height: ListView.view.height;

            onClicked: {
                dmTitle = dmTitle + "+"
                ListView.view.currentIndex = index
                root.sendType(dmType)
            }
            Button {
                x: parent.width - 16
                y: 0
                padding: 0
                height: 16
                width:16
                text: "X"
                onClicked: root.modelRemove(index)
            }
        }
    }//end Component

    Component.onCompleted: {
        // console.log("viewTab.count", viewTab.count)
    }

    // switch model
    onModelSourceChanged: {
        console.log("onModelSourceChanged: modelSource = ", modelSource)
        if(MyTitle.SourceStyle.SourceQML === modelSource)
            viewTab.model = modelButton
        else
            viewTab.model = $Model
        button.text = "Switch to " + (modelSource== MyTitle.SourceStyle.SourceQML? "C++":"QML")+" Model"
    }

    function modelRemove(row){
        if(!viewTab.model) return;
        viewTab.model.remove(row)
    }

    function modelAppend(){
        if(!viewTab.model) return;
        counter +=1
        viewTab.model.append({"dmTitle": "B" + counter,"dmType": "Type" + counter})
    }
    
    //button
    ListModel {
        id: modelButton
        ListElement {dmTitle: qsTr("Load"); dmType: "Rect"}
        ListElement {dmTitle: qsTr("List"); dmType: "cModel"}
        ListElement {dmTitle: qsTr("test1"); dmType: "test1"}
    }
}

/*##^##
Designer {
    D{i:2;anchors_width:300;anchors_x:109}
}
##^##*/
